<nb-card>
  <nb-card-header>Button Sizes</nb-card-header>

  <nb-card-body>
    <div class="size-container">
      <div class="container-title">
        <span>Large Button</span>
      </div>
      <div class="subheader">
        <span>0.875rem 1.75rem</span>
      </div>
      <div>
        <button nbButton size="large">Large Button</button>
      </div>
    </div>
    <div class="size-container">
      <div class="container-title">
        <span>Medium Button</span>
      </div>
      <div class="subheader">
        <span>0.75rem 1.5rem</span>
      </div>
      <div>
        <button nbButton size="medium">Medium Button</button>
      </div>
    </div>
    <div class="size-container">
      <div class="container-title">
        <span>Small Button</span>
      </div>
      <div class="subheader">
        <span>0.675rem 1.5rem</span>
      </div>
      <div>
        <button nbButton size="small">Small Button</button>
      </div>
    </div>
    <div class="size-container">
      <div class="container-title">
        <span>X-Small Button</span>
      </div>
      <div class="subheader">
        <span>0.5rem 1.25rem</span>
      </div>
      <div>
        <button nbButton size="xsmall">X-Small Button</button>
      </div>
    </div>
  </nb-card-body>
</nb-card>
